<!--
 * @Author: your name
 * @Date: 2022-11-04 19:07:22
 * @LastEditTime: 2022-12-12 13:53:26
 * @LastEditors: DESKTOP-4QFD9PO
 * @Description: In User Settings Edit
 * @FilePath: \ClothMes\src\views\system\UserManager.vue
-->
<template>
    <div class="main-container">
        <div style="background-color: #fff;height:100%" id="UserManager">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="用户列表" key="1" v-if="permissionStore.hasPermisson('yhgl.yhlb')">
                    <div style="height: 100%;">
                        <UserList></UserList>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="角色管理" key="2" v-if="permissionStore.hasPermisson('yhgl.jsgl')">
                    <div style="height: 100%;">
                        <Roles></Roles>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive} from 'vue'
    import usePermission from '@/store/modules/permission'
    import emitter from '@/hooks/useEventBus'

    export default defineComponent({
        name: 'UserManager',
        setup() {

            const pageData = reactive({
                tableIndex: "1"
            })


            const tabsChange = (e: string | number) => {
                emitter.emit('window-change')
                if (e === '1') {
                    emitter.emit('refresh-UserList')
                } else if (e === '2') {
                    emitter.emit('refresh-Roles')
                }
            }
            const permissionStore = usePermission()
            return {
                pageData,
                tabsChange,
                permissionStore
            }
        }
    })
</script>
<style scoped>
    .main-container {
        height: 100%;
    }
</style>